<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>预览视图</title>
  <link href="../Styles/styles.css" rel="stylesheet" type="text/css"/>
</head>

<body>
  <h2 id="preview">预览</h2>

  <p class="h2subheading">— 显示代码视图变化 —</p>

  <p>Preview is a movable window that gives you a dynamically updated read-only view of what appears in Code View. You can also inspect your code and styles by clicking the Inspect button (flashlight) in the toolbar at the bottom of Preview.</p>
  <p>预览是一个可移动的窗口，可为您提供代码视图中显示的内容的动态更新的只读视图。您还可以通过单击“预览”底部的工具栏中的“检查”按钮（手电筒）来检查代码和样式。</p>

  <p>You can use Preview to show the results of changes in your code (including immediate feedback of errors), and you can also open a CSS stylesheet to make changes that are shown in Preview.</p>
  <p>您可以使用“预览”显示代码更改的结果（包括错误的即时反馈），还可以打开 CSS 样式表进行更改，以显示在“预览”中。</p>

  <p>Activate the Preview window by selecting the menu item <span class="menuitem">View→Preview</span> or its keyboard shortcut:</p>
  <p>通过选择菜单项 <span class="menuitem">查看→预览</span> 或其键盘快捷键，激活“预览”窗口：</p>

  <div class="image">
    <img alt="preview-window" src="../Images/preview-window.png"/>
  </div>

  <div class="tip">
    <p class="tiptext">You can toggle the Preview window open or closed with its shortcut, and even move the window to a second monitor if you have one.</p>
    <p class="tiptext">您可以使用其快捷方式切换“预览”窗口的打开或关闭状态，如果有的话，甚至可以将其移至另一台监视器。</p>
  </div>

  <p>The Preview window will be updated immediately when you click somewhere in Code View. It will also be updated after you stop typing for a short time.</p>
  <p>单击“代码视图”中的某个位置时，“预览”窗口将立即更新。 短时停止输入后，它也会更新。</p>

  <div class="tip">
    <p class="tiptext">If you click in Preview the Code View tab will sync to the same location.</p>
    <p class="tiptext">如果单击“预览”，则“代码视图”选项卡将同步到相同位置。</p>
  </div>

<!--<h3 class="sigil_not_in_toc">Context Menu</h3>

  <p>The Preview context menu includes one very useful feature:</p>

  <p>Right-click on a heading, paragraph, or any area of the screen to see this option:</p> 

  <ul>
    <li><span class="listheading">Inspect Element:</span> Show details for this text in the Inspector window.</li>
  </ul> -->

  <h3 class="sigil_not_in_toc">检查器</h3>

  <p>The Inspector Widget is opened/closed by clicking the flashlight button on the toolbar <img src="../Images/preview-window-toolbar.png" alt="preview window toolbar" width="40%"/> at the bottom of Preview. You can resize and reposition it how you like, and Sigil will remember your settings</p>
  <p>通过单击工具栏 <img src="../Images/preview-window-toolbar.png" alt="preview window toolbar" width="40%"/> 上的手电筒按钮，可以打开或关闭检查器小部件。预览的底部。您可以根据自己的喜好调整大小和位置，Sigil 会记住您的设置</p>

  <p><img src="../Images/preview-window-inspector.png" alt="preview window inspector"/></p>

  <p>The Inspector window is an HTML developer’s tool that allows detailed examination of the code behind the book’s appearance. It is intended to allow you to see why specific sections of your book are displayed the way they are, and to make temporary changes to styles and text to see how they affect your text.</p>
  <p>检查器窗口是 HTML 开发人员的工具，可用于详细检查该书外观后面的代码。目的是让您了解为什么书的特定部分按原样显示，并对样式和文本进行临时更改以查看它们如何影响文本。</p>

  <div class="tip">
    <p class="tiptext">Any changes you make in the Inspector window are only temporary and are not saved!</p>
    <p class="tiptext">您在“检查器”窗口中所做的任何更改都是临时的，不会被保存！</p>
  </div>

  <p>The Inspector is basically the Chrome web developer toolset and you can find more information about it from their documentation. Not all the information applies to Sigil since the software is meant for general web page inspection. Scroll down to the Developer Window section to see what functions are available:</p>
  <p>检查器基本上是 Chrome Web 开发人员工具集，您可以从他们的文档中找到有关它的更多信息。由于该软件用于常规网页检查，因此并非所有信息都适用于 Sigil。向下滚动到“开发人员窗口”部分，以查看可用的功能：</p>

  <ul>
    <li><a href="https://developers.google.com/chrome-developer-tools/docs/overview">Inspector for Chrome Developer Tools</a></li>
  </ul>

  <p>You can make temporary modifications to the styles used by the text to test out changes. Changes to styles are reflected immediately in the Preview area, but if you edit any text you may need to click in the Preview area to refresh it. You can then update your CSS stylesheets to include any changes you decide to keep.</p>
  <p>您可以临时修改文本所使用的样式以测试更改。对样式的更改会立即反映在“预览”区域中，但是如果您编辑任何文本，则可能需要在“预览”区域中单击以刷新它。然后，您可以更新 CSS 样式表，以包括您决定保留的所有更改。</p>

  <div class="tip">
    <p class="tiptext">If you click on an area in the inspector section, the preview area will not sync as you might expect.</p>
    <p class="tiptext">如果单击检查器部分中的某个区域，则预览区域将不会像您期望的那样同步。</p>
  </div>

  <h3 class="sigil_not_in_toc">CSS 样式表预览</h3>

  <p>You can see how changes in your CSS stylesheets affect your text immediately in Preview.</p>
  <p>您可以在“预览”中立即看到CSS样式表中的更改如何影响您的文本。</p>

  <p>To use this feature, open an HTML page and open Preview. Then open your CSS Stylesheet.</p>
  <p>要使用此功能，请打开 HTML 页面并打开预览。然后打开您的 CSS 样式表。</p>

  <p>As you edit your styles in the stylesheet the changes will be reflected in your HTML file in Preview after you stop typing for a second.</p>
  <p>在样式表中编辑样式时，停止输入一秒钟后，更改将反映在“预览”中的 HTML 文件中。</p>
</body>
</html>